<template>
  <div class="contain">
    <div class="top">
      <img src="https://ics.shoprh.com/assets/logo.b36f7a7f.svg" alt="">
      <span>智慧物业管理</span>
      <!-- <div class="hiddenDiv">
      </div> -->
    </div>
    <div class="loginType">
      <div class="selectDiv">
        <!-- 点击账号密码登录，激活色在该元素上，显示账号密码登录表单 -->
        <div @click="() => {
          selectActive = !selectActive
          selectfrom = !selectfrom
        }" :class="['slef', {'active':selectActive}]">
          账号密码登录
        </div>
        <!-- 点击手机号登录，激活色在该元素上，显示手机号登录表单 -->
        <div @click="() => {
          selectActive = !selectActive
          selectfrom = !selectfrom
        }" :class="['srig', { 'active': !selectActive }]">
          手机号登录
        </div>
      </div>
    </div>
    <el-form ref="ruleFormRef" :model="selectfrom ? ruleForm : rulePhone" :rules="selectfrom ? rules1 : rules2"
      label-width="0px">
      <!-- 添加动态切换效果 -->
      <transition name="change" mode="out-in">
        <!-- 账号登录 -->
        <div class="formContent" v-if="selectfrom">
          <el-form-item prop="user">
            <el-icon>
              <User />
            </el-icon>
            <el-input v-model="ruleForm.user" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="pass">
            <el-icon>
              <Lock />
            </el-icon>
            <el-input v-model="ruleForm.pass" :type="passshow ? 'text' : 'password'" placeholder="密码" />
            <!-- 点击此元素，可以控制密码的显示和隐藏 -->
            <span class="pass" @click="() => { passshow = !passshow }">
              <component :is="passshow ? 'View' : 'Hide'"></component>
            </span>
          </el-form-item>
        </div>
        <!-- 手机号登录 -->
        <div class="formContent" v-else>
          <el-form-item prop="phone">
            <el-icon>
              <Iphone />
            </el-icon>
            <el-input v-model="rulePhone.phone" placeholder="手机号" />
          </el-form-item>
          <el-form-item prop="rulecode" style="width:300px">
            <el-icon>
              <Message />
            </el-icon>
            <!-- 验证码相关 -->
            <div class="ruleDiv">
              <el-input v-model="rulePhone.rulecode" type="text" placeholder="验证码" />
              <!-- 点击发送验证码，触发fasongCode方法 -->
              <el-button class="fasong" @click="fasongCode" :disabled="ableBol">
                {{ ableBol ? `${gotime}秒` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </div>
      </transition>
      <el-form-item>
        <div class="infoDiv">
          <!-- 选中记住我时，下次登录会自动填充信息 -->
          <div class="infolef">
            <el-checkbox @change="changeCheck" v-model="checkActive" label="记住我" size="large" />
          </div>
          <div class="inforig">
            忘记密码
          </div>
        </div>
      </el-form-item>
      <!-- 点击确认按钮，触发getlogInfo方法 -->
      <el-form-item>
        <el-button style="width:100%;height:40px" type="primary"
          @click="selectfrom ? getloginInfo1() : getloginInfo2()">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-dialog v-model="dialogVisible" title="您确认要记住信息吗" width="50%">
    <template #footer>
      <span class="dialog-footer">
        <el-button type="error" @click="() => { dialogVisible = false, checkActive = false }">取消</el-button>
        <el-button type="success" @click="confrimInfo">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { loginInfo, loginCode } from '@/api/user'
import { severInfo, severInfoExist } from '@/utils/user'
export default {
  name: 'LoginPage',
  data () {
    return {
      passshow: false,
      ableBol: false,
      gotime: 60,
      ruleForm: severInfoExist()
        ? severInfo()
        : {
            user: '',
            pass: ''
          },
      rulePhone: {
        phone: '',
        rulecode: ''
      },
      checkActive: false,
      dialogVisible: false,
      // 控制显示的说账号登录还是手机号登录
      selectfrom: true,
      // 控制激活色
      selectActive: true,
      rules1: {
        user: [
          { required: true, message: '请输入您的账号', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z]{3,6}$/,
            message: '账号由3-6位字母组成'
          }
        ],
        pass: [
          { required: true, message: '请输入您的密码', trigger: 'blur' },
          {
            pattern: /\d{6,8}/,
            message: '密码由6-8位数字组成'
          }
        ]
      },
      rules2: {
        phone: [
          { required: true, message: '请输入您的电话号码', trigger: 'blur' },
          {
            pattern: /\d{11}/,
            message: '请输入正确的手机号码'
          }
        ],
        rulecode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            pattern: /\d{4}/,
            message: '验证码有误'
          },
          {
            validator: (rule, value, callback) => {
              if (value !== this.num.toString()) {
                callback(new Error('验证码有误'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      num: null
    }
  },
  methods: {
    confrimInfo () {
      this.dialogVisible = false
    },
    changeCheck () {
      this.dialogVisible = true
    },
    // 当点击发送验证码时，触发该方法，按钮禁用，出现一个60秒倒计时
    dajishi () {
      setInterval(() => {
        this.gotime--
      }, 1000)
      setTimeout(() => {
        this.ableBol = false
      }, 60000)
    },
    // 向后端接口发送请求获取验证码
    fasongCode () {
      // 在手机号已经填写正确的情况下，才允许发送请求
      if (this.rulePhone.phone) {
        loginCode().then((res) => {
          if (res.data.code === 200) {
            // 在实例上定义一个属性，用来存储验证码
            this.num = res.data.data.num
            console.log(this.num)
            this.$notify({
              type: 'success',
              message: `
              验证码获取成功,您的验证码为${res.data.data.num}`
            })
            this.ableBol = true
            this.dajishi()
          }
        })
      } else {
        this.$notify({
          type: 'error',
          message: '请输入手机号'
        })
      }
    },
    // 向后端登录接口发送请求，将请求得到的用户信息在本地存储
    getloginInfo1 () {
      console.log(this.selectfrom)
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          loginInfo({
            ...this.ruleForm
          }).then((res) => {
            if (res.data.code === 200) {
              localStorage.setItem('userInfo', JSON.stringify(res.data.data.userinfo))
              localStorage.setItem('token', res.data.data.token)
              localStorage.setItem('role', res.data.data.role)
              // 如果用户在登录时选择了记住我选项，则会在登录成功后在本地在存一份
              if (this.checkActive) {
                localStorage.setItem('severInfo', JSON.stringify(this.ruleForm))
              }
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 1000,
                onClose: () => {
                  this.$router.replace('/')
                }
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg,
                duration: 1000,
                onClose: () => {
                  this.ruleForm.pass = null
                  this.ruleForm.user = null
                }
              })
            }
          })
        }
      })
    },
    getloginInfo2 () {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          loginInfo({
            ...this.rulePhone
          }).then((res) => {
            if (res.data.code === 200) {
              localStorage.setItem('userInfo', JSON.stringify(this.rulePhone))
              localStorage.setItem('token', res.data.token)
              if (this.checkActive) {
                localStorage.setItem('severInfo', JSON.stringify(this.ruleForm))
              }
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 1000,
                onClose: () => {
                  this.$router.replace('/dashBoard')
                }
              })
            } else {
              this.$message({
                type: 'error',
                message: '输入信息有误',
                duration: 1000
                // onclose: () => {
                //   this.ruleForm.pass = null
                //   this.ruleForm.user = null
                // }
              })
            }
          })
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.pass {
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  position: absolute;
  top: 14px;
  right: 17px;
  cursor: pointer;
}

.change-enter-from {
  transform: translateX(100%);
}

// .change-leave-to {
//   transform: translateX(100%);
// }

.change-enter-active {
  transition: all 300ms;
}

.contain {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: #f0f2f5 url(https://ics.shoprh.com/assets/background.a568162c.svg) no-repeat 50%;
  background-size: 100%;
  padding: 94px 0 144px;
  position: relative;

  .top {
    height: 44px;
    line-height: 44px;
    text-align: center;

    img {
      height: 44px;
      vertical-align: top;
    }

    span {
      font-size: 33px;
      color: rgba(0, 0, 0, .85);
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      font-weight: 600;
      position: relative;
      top: 2px;
      margin-left: 15px;
    }

    .hiddenDiv {
      font-size: 14px;
      color: rgba(0, 0, 0, .45);
      margin-top: 12px;
      margin-bottom: 40px;
    }
  }

  .loginType {
    width: 368px;
    height: 45px;
    align-self: center;
    margin-top: 33px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;

    .selectDiv {
      width: 250px;
      height: 100%;
      display: flex;
      align-items: center;

      .active {
        color: #1890ff;
        font-weight: 500;
        border-bottom: 2px solid #1890ff;
      }

      .slef {
        margin: 0 32px 0 0;
      }

      .srig,
      .slef {
        box-sizing: border-box;
        height: 100%;
        text-decoration: none;
        cursor: pointer;
        // padding: 12px 16px;
        padding: 12px 10px;
      }
    }
  }

  :deep(.el-form) {
    width: 368px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  :deep(.el-form-item) {
    width: 368px;
    display: flex;
    position: relative;
    margin-bottom: 25px;

    .infoDiv {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      padding: 0 5px;

      .infolef {
        width: 88px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: rgba(0, 0, 0, .65);

        input {
          margin-right: 8px;
        }
      }

      .inforig {
        display: flex;
        align-items: center;
        color: #1890ff;
        cursor: pointer;
      }
    }

    .el-icon {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 10;
      color: rgba(0, 0, 0, .65);
      font-size: 15px;
    }

    .el-input__inner {
      flex-grow: 0;
      width: 86%;
    }

    .el-input {
      height: 40px;
      // padding-left: 14px;
      box-sizing: border-box;
    }
  }

  .ruleDiv {
    height: 40px;
    width: 250px;
    position: relative;

    :deep(.el-input__inner) {
      width: 79%;
    }
  }

  .fasong {
    height: 40px;
    width: 100px;
    position: absolute;
    right: -117px
  }

  // .inputDiv{
  //   width: 368px;
  //   height: 131px;
  //   align-self: center;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content:space-around;
  //   div{
  //     background: #fff;
  //     height: 40px;
  //     width: 100%;
  //     border: 1px solid #d9d9d9;
  //     border-radius: 2px;
  //     color: rgba(0, 0, 0, .65);
  //     input{
  //       width:100%;
  //       height: 100%;
  //       border: 0;
  //         padding-left: 30px;
  //           box-sizing: border-box;
  //     }
  //   }
  // }
}
</style>
